<template>
	<view class="white">
		<u-navbar :is-back="false" :border-bottom="false" :background="{ background: '#fff' }">
			<view class="slot-wrap flex align-center">
				<text class="cuIcon-back" @click="Back"></text>
				我的课程
			</view>
		</u-navbar>
		<!-- #ifdef H5 -->
		<u-sticky index='1' :offset-top="0" :enable="enable">
		<!-- #endif -->
		<!-- #ifndef  H5 -->
		<u-sticky index='1' :offset-top="offsetTop" h5-nav-height="44" :enable="enable">
		<!-- #endif -->
		<u-tabs :list="list" active-color="#FE7E00" bar-height="4" :bold="false" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</u-sticky>
		<view class="main">
			<view class="u-flex">
				<view class="banren">
					<image src="../../static/images/banren.png" mode="aspectFill"></image>
				</view>
				<view class="">
					<view class="u-font-30">
						鲁小班课程介绍
					</view>
					<view class="u-font-24">
						时长09:59:59
					</view>
				</view>
			</view>
			<view class="u-flex">
				<view class="banren">
					<image src="../../static/images/banren.png" mode="aspectFill"></image>
				</view>
				<view class="">
					<view class="u-font-30">
						鲁小班课程介绍
					</view>
					<view class="u-font-24">
						时长09:59:59
					</view>
				</view>
			</view>
			<view class="u-flex">
				<view class="banren">
					<image src="../../static/images/banren.png" mode="aspectFill"></image>
				</view>
				<view class="">
					<view class="u-font-30">
						鲁小班课程介绍
					</view>
					<view class="u-font-24">
						时长09:59:59
					</view>
				</view>
			</view>
			<view class="u-flex">
				<view class="banren">
					<image src="../../static/images/banren.png" mode="aspectFill"></image>
				</view>
				<view class="">
					<view class="u-font-30">
						鲁小班课程介绍
					</view>
					<view class="u-font-24">
						时长09:59:59
					</view>
				</view>
			</view>
			<view class="u-flex">
				<view class="banren">
					<image src="../../static/images/banren.png" mode="aspectFill"></image>
				</view>
				<view class="">
					<view class="u-font-30">
						鲁小班课程介绍
					</view>
					<view class="u-font-24">
						时长09:59:59
					</view>
				</view>
			</view>
			<view class="u-flex">
				<view class="banren">
					<image src="../../static/images/banren.png" mode="aspectFill"></image>
				</view>
				<view class="">
					<view class="u-font-30">
						鲁小班课程介绍
					</view>
					<view class="u-font-24">
						时长09:59:59
					</view>
				</view>
			</view>
			<view class="u-flex">
				<view class="banren">
					<image src="../../static/images/banren.png" mode="aspectFill"></image>
				</view>
				<view class="">
					<view class="u-font-30">
						鲁小班课程介绍
					</view>
					<view class="u-font-24">
						时长09:59:59
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				enable: true,
				offsetTop: 0,
				
				list: [{
					name: '已学'
				}, {
					name: '未学'
				}],
				current: 0
			}
		},
		onLoad() {

		},
		onShow() {
			this.setOffestTop()
		},
		methods: {
			// 适配吸顶tab高度
			setOffestTop() {
				let systemInfo = uni.getSystemInfoSync()
				let topPx = systemInfo.statusBarHeight + 44 // 顶部状态栏+沉浸式自定义顶部导航
				this.offsetTop = topPx / (uni.upx2px(topPx) / topPx) // px转rpx
				console.log(this.offsetTop)
			},
			Back() {
				uni.navigateBack({});
			},
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss">
	.banren {
		margin-right: 30rpx;
		image {
			width: 335rpx;
			height: 250rpx;
			border-radius: 15rpx;
		}
	}

	.main {
		padding: 65rpx 25rpx;
		.u-flex{
			margin-bottom: 35rpx;
			.u-font-30{
				color: #333333;
			}
			.u-font-24{
				margin-top: 30rpx;
				color: #666;
			}
		}
		
	}
</style>
